<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar[identity]" :key="index" @tap="changeTab(item)">
			<p v-if="item.pagePath.indexOf('message') >= 0 && allUnread > 0">{{allUnread}}</p>
			<div class="tabbar-icon">
				<image v-if="activePath == index" :src="item.selectedIconPath" mode=""></image>
				<image v-else :src="item.iconPath" mode=""></image>
			</div>
			<div class="tabbar-label">
				{{item.text}}
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			activePath: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				tabbar: [
					// 牛人
					[{
							"pagePath": "/pages/index/index",
							"iconPath": require("@/static/tabbar/tabbar-home.png"), //未选中tab图标路径
							"selectedIconPath": require("@/static/tabbar/tabbar-home-ed.png"), //选中tab图标路径
							"text": "首页",
						},
						{
							"pagePath": "../message/index", //页面路径
							"text": "消息", //tab字体显示
							"iconPath": require("@/static/tabbar/tabbar-message.png"), //未选中tab图标路径
							"selectedIconPath": require("@/static/tabbar/tabbar-message-ed.png") //选中tab图标路径
						}, {
							"pagePath": "/pages/user/index",
							"text": "我的",
							"iconPath": require("@/static/tabbar/tabbar-user.png"),
							"selectedIconPath": require("@/static/tabbar/tabbar-user-ed.png")
						},
					],
					// 企业
					[{
							"pagePath": "/pages/index/index",
							"iconPath": require("@/static/tabbar/tabbar-home.png"), //未选中tab图标路径
							"selectedIconPath": require("@/static/tabbar/tabbar-home-ed.png"), //选中tab图标路径
							"text": "牛人",
						},
						{
							"pagePath": "/pages/index/index?strict=1", //页面路径
							"text": "严选", //tab字体显示
							"iconPath": require("@/static/tabbar/tabbar-yx.png"), //未选中tab图标路径
							"selectedIconPath": require("@/static/tabbar/tabbar-yx-ed.png") //选中tab图标路径
						}, {
							"pagePath": "/pages/index/postJob",
							"text": "发布",
							"iconPath": require("@/static/tabbar/tabbar-push.png"),
							"selectedIconPath": require("@/static/tabbar/tabbar-push.png")
						},
						{
							"pagePath": "../message/index", //页面路径
							"text": "消息", //tab字体显示
							"iconPath": require("@/static/tabbar/tabbar-message.png"), //未选中tab图标路径
							"selectedIconPath": require("@/static/tabbar/tabbar-message-ed.png") //选中tab图标路径
						},
						{
							"pagePath": "/pages/user/index",
							"iconPath": require("@/static/tabbar/tabbar-user.png"),
							"selectedIconPath": require("@/static/tabbar/tabbar-user-ed.png"),
							"text": "我的",
						}
					]
				]
			};
		},
		computed: {
			allUnread() {
				console.log(getApp().globalData.allUnread)
				return getApp().globalData.allUnread
			},
			identity() {
				let loginInfo = uni.getStorageSync('loginInfo')
				return loginInfo ? loginInfo.identity - 1 : 0

			},
		},
		methods: {
			changeTab(item) {

				uni.redirectTo({
					url: item.pagePath,
					success: (e) => {},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;
		width: 100%;
		height: 6%;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		padding-top: 38upx;
		height: calc(124upx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0px 10px 20px 0px rgba(75, 51, 100, 0.05);

		.uni-tabbar__item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			p {
				position: absolute;
				top: -10upx;
				right: -10upx;
				font-size: 24upx;
				color: #fff;
				background: tomato;
				border-radius: 30rpx;
				padding: 0 6rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;

			}

			.tabbar-icon {
				margin-bottom: 12upx;

				image {
					width: 70upx;
					height: 40upx;
				}
			}

			.tabbar-label {
				color: #666E7A;
				font-size: 20upx;
				font-weight: 400;
				line-height: 20upx;
			}

			.uni-tabbar__bd {

				// tabBar单项
				.uni-tabbar__icon {
					// tabBar图标
					width: 100upx;
					height: 40rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.uni-tabbar__label {
				// tabBar文字
				font-size: 20rpx;
				font-weight: 400;
				margin-top: 12upx;
				color: #666E7A;
				text-align: center;

				&.active {
					background-image: linear-gradient(to right top, #1CFDF1, #B330FF);
					font-size: 22rpx;
					-webkit-background-clip: text;
					-moz-background-clip: text;
					background-clip: text;
					box-decoration-break: clone;
					-webkit-box-decoration-break: clone;
					-moz-box-decoration-break: clone;
					color: transparent;
					position: relative;
				}
			}
		}

		// .uni-tabbar__icon {
		// 	height: 42upx;
		// 	line-height: 42upx;
		// 	text-align: center;
		// }

		.icon {
			display: inline-block;
		}

		// .uni-tabbar__label {
		// 	line-height: 24upx;
		// 	font-size: 24upx;
		// 	color: #999;

		// 	&.active {
		// 		color: #1ca6ec;
		// 	}
		// }
	}
</style>
